import React, { Component } from 'react'

/** 引入布局组件 */
import {
    Layout
} from '../../components'
import {
    getHomeList
} from '../../apis/home'
import { Toast, Icon, Picker, Button } from 'antd-mobile'

// 引入redux
import { connect } from 'react-redux'
import { getCityList } from '../../action/homeAct'

import HomeItem from './HomeItem'

// 引入助手类
import emitter from '../../util'

/** 引入页面样式 */
import './home.less'

class HomeIndex extends Component {

    constructor() {
        super()
        this.state = {
            pageList: [],
            pageNum: 0,
            pickerValue: '',
            cityShow: false,     // 是否显示地市选择
        }
    }

    componentDidMount() {
        // 获取页面city数据
        this.props.dispatch(getCityList())
        this.getPageList()

        // 监听页面广播事件
        emitter.on('locationEvent', data => {
            this.setState({
                cityShow: true
            })
        })

        // 获取当前定位信息
        let _this = this
        if (window.plus && window.plus.geolocation) {
            window.plus.geolocation.getCurrentPosition(function(data) {
                let value = [data.address.province, data.address.city, data.address.district],
                    str = []
                
                _this.props.cityList.map(f => {
                    if (f.label === value[0]) {
                        str.push(f.value)
                        f.children.map(s => {
                            if (s.label === value[1]) {
                                str.push(s.value)
                                s.children.map(t => {
                                    if (t.label === value[2]) {
                                        str.push(t.value)
                                    }
                                })
                            }
                        })
                    }
                })

                _this.setState({
                    pickerValue: str
                })
            }, function(e) {
                console.log(e)
            }, {
                
            })
        }
    }

    // componentWillUnmount 释放事件监听
    componentWillUnmount() {
        emitter.removeListener("locationEvent", () => {})
    }

    // 获取页面数据的方法
    getPageList = async () => {
        Toast.loading()
        let result = await getHomeList(this.state.pageNum * 20)
        if (result.code === 200) {
            this.setState({
                pageList: [
                    ...this.state.pageList,
                    ...result.data.list
                ]
            })
        }
        Toast.hide()
    }

    /** 监听页面滚动 */
    scrollEvt = evt => {
        if (this.state.pageNum > 4) return
        let node = evt.target
        if (node.scrollHeight - (node.scrollTop + node.clientHeight) < 15) {
            this.setState({
                pageNum: ++this.state.pageNum
            })
            // todo
            this.getPageList()
        }
    }

    pickConfirm = (value) => {
        
        let str = []
        // for ... of   => break
        this.props.cityList.map(f => {
            if (f.value === value[0]) {
                str.push(f.label)
                f.children.map(s => {
                    if (s.value === value[1]) {
                        str.push(s.label)
                        s.children.map(t => {
                            if (t.value === value[2]) {
                                str.push(t.label)
                            }
                        })
                    }
                })
            }
        })

        console.log(value)
        console.log(str, 'city list')

        this.setState({
            pickerValue: value,
            cityShow: false,
            pageNum: 0,
            pageList: []
        }, () => {
            this.getPageList()
        })
    }

    /** 跳转到详情页面 */
    toDetail = id => {
        this.props.history.push('/home/detail/' + id, {stateId: id})
    }

    render() {
        let cityData = this.props.cityList
        return (
            <div onScroll={this.scrollEvt} className="home-container-page">
                <ul className="list-box">
                    {
                        this.state.pageList.map(it => {
                            return (
                                <HomeItem toDetail={this.toDetail} key={it.id} {...it}/>
                            )
                        })
                    }
                    {
                        this.state.pageNum > 4
                        ?
                        <div className="home-more">已经到底</div>
                        :
                        <div className="home-more">
                            <Icon type="loading"/>
                            下拉加载更多
                        </div>
                    }
                </ul>

                <Picker
                    visible={this.state.cityShow}
                    title="选择地区"
                    extra="请选择(可选)"
                    data={cityData}
                    value={this.state.pickerValue}
                    onChange={v => this.setState({ pickerValue: v })}
                    onOk={ this.pickConfirm }
                >
                </Picker>
            </div>
        )
    }
}

// 实现store的state与本组件的props 映射方法
const mapProps = state => {
    return {
        cityList: state.Home.cityList
    }
}

export default connect(mapProps)(Layout(HomeIndex, {title: '首页', hideBack: true, showMore: true, showFooter: true}))